<template>
    <view class="y-margin-top-md y-pos-relative -staff-x-list" v-if="comShow">
        <view class="y-flex y-scroll-x" v-if="nurseList_.length">
            <y-navigator
                url="../../pages/nurseInformation/nurseInformation"
                v-for="(item, index) in nurseList_"
                :key="index"
                :options="{ id: item.careWorkerId }"
            >
                <!-- 住院陪护护理员信息增加跳转护理员信息详情 -->
                <view
                    class="y-flex staff-container y-bg-grey y-margin-right"
                    @click="ZYPHjumpPages(item.careWorkerId )"
                >
                    <div class="staff-icon y-margin-right">
                        <image
                            class="image"
                            :src="item.careWorkerPhoto||`${imageUrlone}/defaultHead.png`"
                            mode="widthFix"
                        ></image>
                    </div>
                    <view class="">
                        <view class="y-ellipsis" style="width: 146rpx;">
                            {{ item.careWorkerName }}
                        </view>
                        <view class="y-detail">{{ item.sex_ }} {{ item.careWorkerAge }}岁</view>
                    </view>
                </view>
            </y-navigator>
        </view>
        <y-navigator
            url="/pages/zyph/nurseList/nurseList"
            :options="addOptions"
            v-if="status == 1"
            class=" y-flex y-flex-center"
        >
            <view class="y-with-click-effect y-flex y-color-primary add">
                <image :src="imageUrlone+'/add.svg'" class="icon"></image>
                选择护理员
            </view>
        </y-navigator>
        <y-navigator
            url="/pages/zyph/nurseList/nurseList"
            :options="moreOptions"
            v-if="nurseList_.length > 2"
        >
            <view class="y-color-primary more-text y-flex">
                <view class="">更多</view>
                <view class="" v-if="moreSymbols">>></view>
            </view>
        </y-navigator>
        <y-navigator url="/pages/zyph/nurseList/nurseList" :options="addOptions" v-if="showChange">
            <view class="y-color-primary more-text y-flex">
                <view class="">更换</view>
                <view class="">>></view>
            </view>
        </y-navigator>
    </view>
</template>

<script>
export default {
    props: {
        nurseList: { type: Array, default: [] },
        orderItemId: { type: String || Number, default: '' },
        projectPointId: { type: String || Number, default: '' },
        serviceType: { type: String || Number, default: '' },
        departmentId: { type: String || Number, default: '' },
        moreSymbols: { type: Number, default: true },
        status: 0,
    },
    data() {
        return {
            imageUrlone: this.imageUrl,
        }
    },
    // 添加护理员详情页面跳转，住院陪护护理员详情页面和轻陪护理员详情页面公用一个页面组件，只是护理员id不同就可以
    methods: {
        ZYPHjumpPages(id) {
            uni.navigateTo({
                url: `/pages/zyph/nurseInformation/nurseInformation?id=${id}`,
            })
        },
    },
    mounted() {
        console.warn('护理员列表', this.nurseList)
    },
    computed: {
        comShow() {
            return [0, 1, '0', '1'].includes(this.serviceType)
        },
        showChange() {
            return this.status == 1 && this.nurseList.length
        },
        moreOptions() {
            return { orderItemId: this.orderItemId }
        },
        addOptions() {
            return {
                projectPointId: this.projectPointId,
                serviceType: this.serviceType,
                orderItemId: this.orderItemId,
                departmentId: this.departmentId,
            }
        },
        nurseList_() {
            const enumSex = ['女', '男']
            return this.nurseList.map(item => {
                item.sex_ = enumSex[item.careWorkerSex]
                return item
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.add {
    background-color: rgba($color: $color-primary, $alpha: 0.1);
    border-radius: 40rpx;
    padding: 8rpx 18rpx;
}
.icon {
    width: 30rpx;
    height: 30rpx;
}
.staff-icon {
    width: 80rpx;
    height: 80rpx;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 40rpx;
    .image {
        width: 100%;
    }
}
.staff-container {
    padding: $spacing;
    border-radius: $border-radius;
    width: 300rpx;
    flex-shrink: 0;
}
.more-text {
    flex-direction: column;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    height: 146rpx;
    padding-left: 100rpx;
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 1)
    );
}
.-staff-x-list {
    word-break: keep-all;
}
.moreFont {
    font-size: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: $color-primary;
}
</style>
